<template>
  <div style="background-color:#fff;padding:10px 20px;margin-bottom: 5px">
    <span style="line-height:60px;font-size:20px;">工作记录</span>
  </div>
  <el-row :gutter="10">
   <el-col :span="15">
     <el-calendar style="width: 100%;">
       <template #date-cell="{ data }">
         <div @click="handleDateClick(data)"
              :class="isSelected(data.day) ? 'is-selected' : ''"  style="width: 100%;height: 100%;">
           {{ data.day.split('-').slice(2).join('-') }}
           {{ isSelected(data.day) ? '✔️' : '' }}
         </div>
       </template>
     </el-calendar>
   </el-col>
   <el-col :span="9">
     <el-row :gutter="10">
       <el-col :span="1"></el-col>
       <el-col :span="23">
        <el-button @click="dd">加载工作记录</el-button>
         <br>
        <el-button @click="checkWork">检查最近三天是否有工作</el-button>
      </el-col>
     </el-row>
     <el-row>
       <el-col :span="24">
         <div style="background-color: white;width: 100%;height: 496px;border: whitesmoke solid 3px;border-radius: 5px;padding: 5px ">
           <el-collapse accordion>
             <el-collapse-item v-for="item in workRecordArr"  :title="'订单号：'+item.orderId" :name="item.id">
               <div v-for="(work,index) in item.workDate">
                 <span><b>工作{{index+1}}</b></span><br>
                 <span style="margin-left: 20px;"> 工作时间：{{item.workDate[index]}}&#12288;</span>
                 <span>工作内容：{{item.workContent[index]}}&#12288;</span><br>
                 <span style="margin-left: 20px;">工作时长：{{item.workHours[index]}}&#12288;</span>
                 <span>工作结果：{{item.workOutcome[index]}}</span>
               </div>
               <p><b>备注：</b>{{item.remark}}</p>
             </el-collapse-item>
           </el-collapse>
         </div>
       </el-col>
     </el-row>
   </el-col>
  </el-row>

  <el-dialog title="工作记录" v-model="dialogVisible"
      :close-on-click-modal="false">
    <el-menu mode="horizontal"
             default-active="0"
             active-text-color="#ffd04b">
      <el-menu-item v-for="(work,index) in works" @click="showForm(index)" :index="index">
        订单号：{{work.orderId}}
      </el-menu-item>
    </el-menu>
    <el-card v-if="selectWork !==null" style="margin-top: 5px;">
      <el-form :id="works[selectWork].id" label-position="left" label-width="80px">
        <el-form-item label="订单号">
          <el-input v-model="works[selectWork].orderId" disabled></el-input>
        </el-form-item>
        <el-form-item label="工作时间">
          <el-input v-model="works[selectWork].workDate" disabled></el-input>
        </el-form-item>
        <el-form-item label="工作内容">
          <el-input v-model="works[selectWork].workContent" disabled></el-input>
        </el-form-item>
        <el-form-item label="工作时长">
          <el-input v-model="works[selectWork].workHours" placeholder="请输入" :disabled="disable"></el-input>
        </el-form-item>
        <el-form-item label="工作结果">
          <el-input v-model="works[selectWork].workOutcome" placeholder="请输入" :disabled="disable"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="works[selectWork].remark" placeholder="请输入" :disabled="disable"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="saveWorkRecord(selectWork)" type="primary" v-if="!disable">提交</el-button>
      </template>
    </el-card>


  </el-dialog>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";

const dialogVisible=ref(false)
const searchWorkRecord=ref({})
const workRecordArr=ref([])
const currentEmp=ref({})
const workRecord=ref({})
const dateArr=ref([])
const dateIndex=ref([])
const disable=ref(false)
const selectWork=ref(0)
const showForm = (index) => {
  selectWork.value=index
  if (works.value[index].workOutcome==""){
    disable.value=false
  }else {
    disable.value=true
  }

}
const dd = () => {
  dateArr.value=[]
  dateIndex.value=[]
  for (let r of workRecordArr.value){
    dateIndex.value.push(r.workDate.length)
    for (let date of r.workDate){
      dateArr.value.push(formatDate(new Date(date)))
    }
  }
}
const checkWork = () => {
  const now=new Date()
  let next=new Date(now)
  next.setDate(now.getDate()+1)
  let third=new Date(now)
  third.setDate(now.getDate()+2)
  let ss=[]
  ss.push(formatDate(next),formatDate(third))
  let data={day:formatDate(now)}
  handleDateClick(data)
  if (works.value.length>0){
    alert("您今天有"+works.value.length+"份工作需要完成！")
  }else if (ss.some(date => dateArr.value.includes(date))){
    alert("您在三天内有工作需要完成！")
  }else {
    alert("近三天没有工作")
  }
}
const isSelected = (dateStr) => {
  return dateArr.value.includes(dateStr);
}
const saveWorkRecord = (i) => {
  let index=works.value[i].index
  let num=works.value[i].num
  workRecord.value=workRecordArr.value[index]
  workRecord.value.workHours[num]=works.value[i].workHours
  workRecord.value.workContent[num]=works.value[i].workContent
  workRecord.value.workOutcome[num]=works.value[i].workOutcome
  workRecord.value.workProgress+=1
  workRecord.value.remark=works.value[i].remark
  if (workRecord.value.workProgress==workRecord.value.workTotal){
    workRecord.value.endTime=new Date()
  }
  console.log(workRecord.value)
  if (confirm("保存吗")){
    axios.post(BASE_URL+"/v1/workRecord/save",workRecord.value)
        .then((response)=>{
          if (response.data.code==2000){
            ElMessage.success("保存成功")
            loadWorkRecord()
            dd()
            dialogVisible.value=false
          }else {
            ElMessage.error(response.data.msg)
          }
        })
  }
}
const works=ref([])
const handleDateClick = (data) => {
  works.value=[]
  const dateStr=data.day
  if (dateArr.value.includes(dateStr)){
    let count=[]
    for (let i=0;i<dateArr.value.length;i++){
      if (dateArr.value[i]==dateStr){
        count.push(i)
      }
    }
    for (let i of count){
      let num=i
      let index=0
      for (let l of dateIndex.value){
        if (num>=0 && num<l){
          let work={}
          work.id=workRecordArr.value[index].id
          work.orderId=workRecordArr.value[index].orderId
          work.workDate=workRecordArr.value[index].workDate[num]
          work.workHours=workRecordArr.value[index].workHours[num]
          work.workContent=workRecordArr.value[index].workContent[num]
          work.workOutcome=workRecordArr.value[index].workOutcome[num]
          work.remark=workRecordArr.value[index].remark
          work.index=index
          work.num=num
          works.value.push(work)
        }
        num=num-l
        index++
      }
    }
    dialogVisible.value=true
    if (works.value[0].workOutcome==""){
      disable.value=false
    }else {
      disable.value=true
    }
  }
}
const loadWorkRecord = () => {
  searchWorkRecord.value.empId=currentEmp.value.id
  axios.post(BASE_URL+'/v1/workRecord/select',searchWorkRecord.value)
      .then((response)=>{
        if (response.data.code==2000){
          workRecordArr.value=response.data.data
        }else {
          ElMessage.error(response.data.msg)
        }
      })
}
const formatDate = (date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};
onMounted(async ()=>{
  await getEmp(currentEmp)
  await loadWorkRecord()
})
</script>

<style scoped>
.is-selected {
  color: #1989fa;
}
</style>